<h2 class="sr-only"><%= t(".title") %></h2>

<div class="px-4 sm:px-6">
  <%= form_with url: developers_path, id: form_id, method: :get do |form| %>
    <div class="pb-6">
      <%= form.label :search_query, t(".search_query_label"), class: "block text-sm font-medium text-gray-900" %>
      <%= render Users::PaywalledComponent.new(user, nil, size: :small, title: t(".paywalled_search.title")) do %>
        <div class="mt-1 relative flex items-center">
          <%= form.text_field :search_query, value: search_query, placeholder: t(".search_query_placeholder"), class: "shadow-sm focus:ring-gray-500 focus:border-gray-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md mt-2" %>
        </div>
      <% end %>
    </div>

    <% if Feature.enabled?(:developer_specialty_querying) %>
      <%= render Users::PaywalledComponent.new(user, nil, size: :small, title: t(".paywalled_search.title")) do |component| %>
        <fieldset data-controller="toggle accessibility" data-toggle-visibility-class="hidden">
          <div class="border-t border-gray-200 py-6">
            <legend class="-mx-2 -my-3 flow-root">
              <%= render CollapseControlComponent.new(t(".specialties.title"), collapsed: collapse_specialties?) do %>
                <span aria-hidden="true">
                  <%= render BadgeComponent.new("New!", color: :purple) %>
                </span>
              <% end %>
            </legend>
            <%= tag.div id: "specialties-accordion", "data-toggle-target": "element", class: [hidden: collapse_specialties?] do %>
              <div class="space-y-4 pt-6">
                <%= form.collection_check_boxes(:specialty_ids, specialties, :id, :name, {include_hidden: false}) do |specialty| %>
                  <div class="flex items-center">
                    <%= specialty.check_box checked: specialty_selected?(specialty.object.id), class: "h-4 w-4 border-gray-300 rounded text-gray-600 text-gray-600 focus:ring-gray-500" %>
                    <%= specialty.label class: "text-gray-500 text-sm ml-3" %>
                  </div>
                <% end %>
              </div>
            <% end %>
          </div>
        </fieldset>

        <% component.custom_paywall do %>
          <%# Intentionally render nothing for now. %>
        <% end %>
      <% end %>
    <% end %>

    <% if Feature.enabled?(:badge_filter) %>
      <fieldset data-controller="toggle accessibility" data-toggle-visibility-class="hidden">
        <div class="border-t border-gray-200 py-6">
          <legend class="-mx-2 -my-3 flow-root">
            <%= render CollapseControlComponent.new(t(".badge.title")) %>
          </legend>
          <div data-toggle-target="element">
            <div class="space-y-4 pt-6">
              <%= form.collection_check_boxes(:badges, badges, :first, :last, {include_hidden: false}) do |b| %>
                <div class="flex items-center">
                  <%= b.check_box checked: badge_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-gray-600 text-gray-600 focus:ring-gray-500" %>
                  <%= b.label class: "text-gray-500 text-sm ml-3" %>
                </div>
              <% end %>
            </div>
          </div>
        </div>
      </fieldset>
    <% end %>

    <fieldset data-controller="toggle accessibility" data-toggle-visibility-class="hidden">
      <div class="border-t border-gray-200 py-6">
        <legend class="-mx-2 -my-3 flow-root">
          <%= render CollapseControlComponent.new(t(".role_level.title")) %>
        </legend>
        <div data-toggle-target="element">
          <div class="space-y-4 pt-6">
            <%= form.collection_check_boxes(:role_levels, role_levels, :first, :last, {include_hidden: false}) do |b| %>
              <div class="flex items-center">
                <%= b.check_box checked: role_level_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-gray-600 text-gray-600 focus:ring-gray-500" %>
                <%= b.label class: "ml-3 text-gray-500 text-sm" %>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </fieldset>

    <fieldset data-controller="toggle accessibility" data-toggle-visibility-class="hidden">
      <div class="border-t border-gray-200 py-6">
        <legend class="-mx-2 -my-3 flow-root">
          <%= render CollapseControlComponent.new(t(".work_preference.title")) %>
        </legend>
        <div data-toggle-target="element">
          <div class="space-y-4 pt-6">
            <%= form.collection_check_boxes(:role_types, role_types, :first, :last, {include_hidden: false}) do |b| %>
              <div class="flex items-center">
                <%= b.check_box checked: role_type_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500" %>
                <%= b.label class: "ml-3 text-gray-500 text-sm" %>
              </div>
            <% end %>
          </div>

          <hr class="py-2 mt-6">

          <div class="flex items-top">
            <%= form.check_box :include_not_interested, include_hidden: false, checked: include_not_interested?, class: "mt-1 h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500" %>
            <%= form.label :include_not_interested, t(".include_not_interested"), class: "ml-3 text-sm text-gray-500" %>
          </div>
        </div>
      </div>
    </fieldset>

    <fieldset data-controller="toggle accessibility" data-toggle-visibility-class="hidden">
      <div class="border-t border-gray-200 py-6">
        <legend class="-mx-2 -my-3 flow-root">
          <%= render CollapseControlComponent.new(t(".country.title"), collapsed: collapse_location?) %>
        </legend>
        <%= tag.div id: "location-accordion", "data-toggle-target": "element", class: [hidden: collapse_location?] do %>
          <div class="space-y-4 pt-6">
            <%= form.collection_check_boxes(:countries, top_countries, :first, :last, {include_hidden: false}) do |b| %>
              <div class="flex items-center">
                <%= b.check_box checked: country_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500" %>
                <%= b.label class: "ml-3 text-gray-500 text-sm" %>
              </div>
            <% end %>
          </div>

          <div data-controller="toggle accessibility" data-toggle-visibility-class="hidden">
            <div class="pt-6">
              <h5 class="-mx-2 -my-3 flow-root">
                <%= render CollapseControlComponent.new(t(".all_countries.title"), collapsed: collapse_all_locations?, subcomponent: true) %>
              </h5>
              <%= tag.div id: "all-locations-accordion", "data-toggle-target": "element", class: [hidden: collapse_all_locations?] do %>
                <div class="space-y-4 pt-6">
                  <%= form.collection_check_boxes(:countries, countries, :first, :last, {include_hidden: false}) do |b| %>
                    <div class="flex items-center">
                      <%= b.check_box checked: country_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500" %>
                      <%= b.label class: "ml-3 text-gray-500 text-sm" %>
                    </div>
                  <% end %>
                </div>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>
    </fieldset>

    <fieldset data-controller="toggle accessibility" data-toggle-visibility-class="hidden">
      <div class="border-t border-gray-200 py-6">
        <legend class="-mx-2 -my-3 flow-root">
          <%= render CollapseControlComponent.new(t(".timezone.title"), collapsed: collapse_timezone?) %>
        </legend>
        <%= tag.div id: "timezone-accordion", "data-toggle-target": "element", class: [hidden: collapse_timezone?] do %>
          <div class="space-y-4 pt-6">
            <%= form.collection_check_boxes(:utc_offsets, time_zones, :first, :last, {include_hidden: false}) do |b| %>
              <div class="flex items-center">
                <%= b.check_box checked: time_zone_selected?(b.object), class: "h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500" %>
                <%= b.label class: "ml-3 text-gray-500 text-sm" %>
              </div>
            <% end %>
          </div>
        <% end %>
      </div>
    </legend>

    <div class="flex justify-start space-x-2 pb-8">
      <%= link_to t(".clear"), developers_path, class: "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %>
      <%= submit_tag t(".apply"), name: nil, class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 cursor-pointer" %>
    </div>
  <% end %>
</div>
